import React, { Component } from 'react';
import MonacoEditor from 'react-monaco-editor';

class CodeEdit extends Component {
  constructor(props) {
    super(props);
    const { value = '' } = this.props;
    this.state = {
      code: value,
    };
  }

  editorDidMount = (editor, monaco) => {
    console.log('editorDidMount', editor);
    editor.focus();
  };

  onChange = (newValue, e) => {
    const { onChange } = this.props;
    console.log('onChange', newValue, e);
    onChange(newValue);
    this.setState({
      code: newValue,
    });
  };

  render() {
    const { code } = this.state;

    return (
      <MonacoEditor
        width="800"
        height="600"
        language="json"
        theme="vs-light"
        value={code}
        options={
          {
            selectOnLineNumbers: true,
          }
        }
        onChange={this.onChange}
        editorDidMount={this.editorDidMount}
      />
    );
  }
}

export default CodeEdit;
